<template>
    <div class="buy-detail">
        <img class="banner" :src="`${_oss_}images/mobile/buy-detail/bg.png`" alt="北京华锐云空间" />

        <div class="bg">
            <div class="title">云空间会员服务</div>

            <div class="template-box" v-if="template_id">
                <div class="template-name">
                    {{ templateName }}
                </div>

                <div class="btn-change" @click="onChangeTemplate">切换</div>
            </div>

            <div class="btn-group">
                <div class="btn-item" :class="{ active: active === 1 }" @click="onActive(1)">
                    按月
                </div>
                <div class="btn-item" :class="{ active: active === 2 }" @click="onActive(2)">
                    按年
                </div>
            </div>
        </div>

        <div class="vip-service" :class="'vip-service-' + type">
            <div class="vip-service-tabs" v-if="type === 'template'">
                <div class="vip-service-tab__item" :class="{ active: tabActive === 0 }" @click="onTabs(0)">
                    普通款
                </div>
                <div class="vip-service-tab__item" :class="{ active: tabActive === 1 }" @click="onTabs(1)">
                    元宇宙多人款
                </div>
            </div>

            <div class="box-list">
                <div class="box-item" v-for="(item, index) in VipInfo[
                    active === 1 ? 'month' : 'year'
                ][tabActive]" :class="{
    active: index == activeCode,
}" :key="item.code" @click="activeCode = index">
                    <template v-if="Array.isArray(item.code)">
                        <div class="tag">{{ item.name }}</div>
                        <div class="price">
                            {{
                                priceMap[item.code[item.active]].price[
                                active === 1 ? "month" : "year"
                                ]
                            }}<span class="unit">/{{ active === 1 ? "月" : "年" }}</span>
                        </div>

                        <div class="mark-icon" @click.stop="item.active = item.active == 0 ? 1 : 0">
                            <img class="change-icon" :src="`${_oss_}images/buy-detail/change-icon.png`" />

                            <div class="text" v-html="item.subProject[item.active]"></div>
                        </div>

                        <div class="port" v-if="item.client">
                            {{ item.client[item.active] }}
                        </div>
                    </template>
                    <template v-else>
                        <div class="tag">{{ item.name }}</div>
                        <div class="price" :class="item.type">
                            <template v-if="item.type === 'free'">免费</template>
                            <template v-if="item.type === 'paid'">
                                {{
                                    priceMap[item.code].price[
                                    active === 1 ? "month" : "year"
                                    ]
                                }}<span class="unit">/{{ active === 1 ? "月" : "年" }}</span>
                            </template>
                            <template v-if="item.type === 'customization'">
                                联系客服沟通
                            </template>
                        </div>

                        <div class="port" v-if="item.client">
                            {{ item.client }}
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <div class="vip-info-box">
            <VipInfoBox :info="VipInfo[active === 1 ? 'month' : 'year'][tabActive][
                activeCode
            ]
                " :priceMap="priceMap" :buyList="buyList" :unit="active === 1 ? 'month' : 'year'" :type="type"
                :authority="authority" />
        </div>
    </div>

    <DialogTemplateChooseM ref="templateDialogRef" @confirm="onConfirm" />
</template>
<script setup>
import VipInfoBox from "./VipInfoBox/M.vue";
import { useContent, VipInfo } from ".";

const router = useRouter();
const templateDialogRef = ref(null);
const {
    template_id,
    templateName,
    type,
    active,
    priceMap,
    buyList,
    onActive,
    GetPrice,
    GetStatus,
    GetCoupons,
} = useContent();
const userStore = useUserStore();
const tabActive = ref(0);
const activeCode = ref(0);

watch(
    () => [active.value, tabActive.value],
    () => {
        activeCode.value = 0;
    }
);

const authority = computed(() => {
    const item =
        VipInfo[active.value === 1 ? "month" : "year"][tabActive.value][
        activeCode.value
        ];

    if (Array.isArray(item.code)) {
        return item.authority[type.value][item.active];
    }
    return item.authority[type.value];
});

const onChangeTemplate = () => {
    templateDialogRef.value.open(template_id, !!template_id);
}

const onConfirm = async (id) => {
    router.push(`/buyDetail/${id}.html`)
}

onMounted(async () => {
    await nextTick();
    if (userStore.isLogin) {
        await GetCoupons();
    }

    if (template_id) {
        await GetPrice();
    } else {
        ElMessageBox.confirm("", "请选择一个模板！", {
            "show-close": false,
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showCancelButton: false,
            autofocus: false,
            lockScroll: false,
            confirmButtonText: "确定",
        }).then(() => {
            templateDialogRef.value.open(template_id, !!template_id);
        });
    }

    if (userStore.isLogin) {
        await GetStatus();

        // 预防支付出问题
        setTimeout(async () => {
            await GetStatus();
        }, 4000);
    }
});

const onTabs = (val) => {
    tabActive.value = val;
};
</script>
<style lang="scss" scoped>
.buy-detail {
    background-color: #f9f0ea;
    padding-bottom: 15px;

    .banner {
        width: 100%;
    }

    .bg {
        width: 100%;

        .title {
            font-weight: bold;
            font-size: 30px;
            color: #333;
            text-align: center;
        }
    }

    .template-box {
        display: flex;
        justify-content: center;
        margin-top: 40px;
        font-size: 16px;

        .btn-change {
            margin-left: 15px;
            color: #5085FB;
            cursor: pointer;
        }
    }

    .btn-group {
        display: flex;
        border-radius: 40px;
        overflow: hidden;
        width: 200px;
        height: 35px;
        background: #fff;
        border-radius: 6px;
        margin: 20px auto 0;
        padding: 1px 2px;

        .btn-item {
            width: 98px;
            height: 33px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            border-radius: 6px;

            &.active {
                background: linear-gradient(90deg, #ffe1ca, #eeb48c);
            }
        }
    }

    .vip-service {
        width: 346px;
        height: 219px;
        background: #ffffff;
        border-radius: 10px;
        margin: 27px auto 0;
        padding: 0 10px;

        &-courseware {
            height: 159px;

            .box-list {
                padding-top: 23px !important;
            }
        }

        &-tabs {
            display: flex;
            padding-top: 28px;

            .vip-service-tab__item {
                flex: 1;
                font-weight: 500;
                font-size: 16px;
                color: #999999;
                text-align: center;

                &.active {
                    position: relative;
                    font-weight: bold;
                    color: #5085fb;

                    &::after {
                        content: "";
                        position: absolute;
                        bottom: -5px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 14px;
                        height: 2px;
                        background: #5085fb;
                        border-radius: 1px;
                    }
                }
            }
        }

        .box-list {
            display: flex;
            padding-top: 43px;

            .box-item {
                position: relative;
                width: 105px;
                height: 119px;
                background: #f7f7f7;
                border: 1px solid #f7f7f7;
                border-radius: 8px;
                margin-right: 5px;

                &:nth-of-type(3n) {
                    margin-right: 0;
                }

                &.active {
                    background: #fbf3e7;
                    border: 1px solid #f3a233;

                    .port {
                        background: #ffe7c3;
                        border-radius: 2px;
                    }
                }

                .tag {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    left: 0;
                    top: 0;
                    padding: 0 12px;
                    height: 20px;
                    background: linear-gradient(90deg, #ff8651, #ff3b3d);
                    border-radius: 8px 0 8px 0;
                    font-size: 12px;
                    color: #fff;
                    transform: translateY(-50%);
                }

                .price {
                    font-weight: bold;
                    font-size: 24px;
                    color: #222;
                    text-align: center;
                    margin-top: 40px;
                    line-height: 1em;

                    .unit {
                        font-size: 15px;
                    }

                    &.customization {
                        margin-top: 50px;
                        font-size: 14px;
                    }
                }

                .mark-icon {
                    position: absolute;
                    top: -6px;
                    right: 0;
                    width: 50px;
                    height: 44px;
                    background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/buy-detail/mark.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                    zoom: 0.8;

                    .change-icon {
                        position: absolute;
                        top: 5px;
                        left: 50%;
                        width: 12px;
                        transform: translateX(-50%);
                    }

                    .text {
                        color: #fff;
                        font-size: 20px;
                        margin-top: 40px;
                        text-align: center;
                        line-height: 1em;
                        zoom: 0.5;
                    }
                }

                .port {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 92px;
                    height: 18px;
                    background: #ebebeb;
                    border-radius: 2px;
                    font-weight: 500;
                    font-size: 9px;
                    color: #444;
                    margin: 25px auto 0;
                }
            }
        }
    }
}

.desc-box-2-1 {
    :deep(.text) {
        font-size: 20px !important;
        margin-top: 50px !important;
        zoom: 0.4 !important;
    }
}

.white {
    .desc-title {
        color: #fff !important;
    }

    .price {
        color: #fff !important;
    }
}
</style>
